<template>
    <el-card shadow="never" class="box-card">
        <div slot="header" class="clearfix">
            <span>字体Icon  </span>
            <div class="el-input el-input--mini" style="width: 200px;">
                <input class="el-input__inner" type="text" ref="copyInput">
            </div>
            <el-switch style="float: right;" active-text="显示class" inactive-text="隐藏class" v-model="showClass"></el-switch>
        </div>

        <IconCollection :show-class="showClass" @icon-change="iconChange"></IconCollection>
    </el-card>
</template>

<script>
import IconCollection from '@/components/icons';

export default {
    components: {
        IconCollection
    },
    data() {
        return {
            showClass: false
        }
    },
    methods: {
        iconChange(item) {
            this.copy(item.font_class)
        },
        copy(text) {
            if(document.execCommand) {
                try {
                    let input = this.$refs.copyInput;
                    input.value = text;
                    input.select();
                    document.execCommand('copy')
                    this.$message.success('复制成功')
                } catch (error) {
                    this.$message.error('复制失败')
                }
            } else {
                this.$message.error('复制失败')
            }
        }
    },
}
</script>

<style lang="scss" scoped>
</style>